<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>档案管理 - 统计</title>
  <!--[if lt IE 9]>
  <script src="libs/html5shiv.min.js"></script>
  <script src="libs/respond.min.js"></script>
  <![endif]-->
  <script src="libs/jquery-1.12.1.min.js"></script>
  <link href="libs/bootstrap-3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <script src="libs/bootstrap-3.3.6/js/bootstrap.min.js"></script>
  <script src="libs/handlebars.min.js"></script>
  <script src="libs/d3.v3.min.js"></script>
  <script src="libs/nv.d3.min.css"></script>
  <script src="libs/nv.d3.min.js"></script>
  <script src="libs/js.cookie-2.1.0.min.js"></script>
  <script src="libs/getQueryString.js"></script>
  <script src="libs/jquery.backstretch.min.js"></script>
  <script src="libs/dateFormat.js"></script>

</head>
<body>
	<div class="container">
		<div class="row">
			<div class="page-header">
				  <h2 class="text-center">统计<br/><small>用户上传档案图片统计</small></h2>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-md-6">
					<ul class="nav nav-pills pull-right">
					    <li>
					    <a href="#">用户：<span id="text1"></span></a>
					    </li>
						<li >
							<a href="index.html">首页</a>
						</li>
						<li >
							<a href="add.html" >添加</a>
						</li>
						<li class="active">
							<a href="#" >统计</a>
						</li>
						<li >
							<a href="query.html" >查询</a>
						</li>
					</ul>
			</div>
		</div>
	</div>
	
		<div class="container">
		<div class="row">
			<div class="col-md-12">
				<hr />
			</div>
		</div>
	</div>
	
<div class="container" >
   	<div class="row">
	<div class="col-md-12">
	  
		<div class="col-md-3 col-md-offset-2">
			<div class="form-group " >
				<label for="date1" >开始日期</label> 
				<input type="date" id="date1"
					class="form-control" />
			</div>
		</div>
			
		
		<div class="col-md-3 ">
			<div class="form-group">
				<label for="date2">结束日期</label> 
				<input type="date" id="date2" 
					class="form-control" />
			</div>
		</div>
	   <div class="col-md-2 col-md-offset-1">
	   		<label for="date2">   </label> 
			<button id="count" class="btn btn-primary btn-block ">查询</button>
	   </div>
	   </div>
   </div>
</div>
<div class="container" >
   	<div class="row">
 		<div class="col-md-12 ">
  		<div  id="chart2">
   			<p class="text-center">
   			  <br/>
   			  <hr/>
   			  <div class="col-md-12 col-md-offset-2 ">
    		  <strong>用户上传档案统计</strong>
    		  </div>
      		  <svg style="height:480px;width:100%"></svg>
     		  <br/>
            </p>
  		</div>
 		</div>
	</div>
</div>
	

<script type="text/javascript"> 
	$(function(){
		$.backstretch("photo/index.jpg");
		
		$.getJSON('querynickname.action', function(res) {
			console.log(res);
			$('#text1').text(res[0].nickname);
		});
		
		$('#count').click(function() {
		$.post('count.action',{
			starttime: $('#date1').val(),
	        endtime: $('#date2').val()
	     }, function (res, status) {
			nv.addGraph(function() {
			
				var chart2 =nv.models.pieChart()
				.x(function(d){
					return d.nickname
				}).y(function(d){
					return d.count
				}).showLabels(true)
				.labelType('percent')
				d3.select("#chart2 svg")
				.datum(res)
				.transition().duration(350)
				.call(chart2);
				return chart2;
				});
				});
			});
		
		
		var d1 =new Date();
		$('#date1').val(d1.format('yyyy-MM-01'));
		var d2 =new Date();
		$('#date2').val(d2.format('yyyy-MM-dd'));
		
		});		

</script>
<script type="text/javascript">  
 	 if(!Cookies.get("user")){
	  	window.location.href = 'login.html';
  	    }
</script>


</body>
</html>
				    